<template>
  <div class="TestCycle">
    <div class="topbox" :style="{ height: !isshow?80 + 'px':140 + 'px' }">
      <SearchFor @toheight="isshow=!isshow" :isshow="isshow" @togetlist="gettablelist" :qiyelist="qiyelist" :shiyanlist="shiyanlist"></SearchFor>
    </div>
    <div class="bodybox" :style="{ height: !isshow?'calc(100% - 90px)':'calc(100% - 150px)' }">
      <TopTitle @command="command" @daochu="daochu" @shuaxin="gettablelist(formdata)" >
        <template #otherbutton>
          <el-button @click="$refs.Dialogref.dialogVisible=true" type="primary" size="small" >
            <i class="el-icon-plus"></i> 新增
          </el-button>
        </template>
      </TopTitle>
      <Dialog ref="Dialogref" @togetlist="gettablelist(formdata)" :qiyelist="qiyelist" :shiyanlist="shiyanlist"></Dialog>
      <div class="table">
        <el-table
          :data="tableData"
          :size="iissize"
          border
          :row-style="getRowStyle"
          :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
          v-loading="loading"
          height="100%"
          style="width: 100%">
          <template slot="empty">
            <el-empty description="暂无数据"></el-empty>
          </template>
          <el-table-column
            v-for="(item,index) in tableConfig"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :type="item.type"
            :align="item.center"
            :width="item.width">
            <template #default="{row}">
              <span>{{row[item.prop]}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            width="200"
            label="操作">
            <template #default="{row}">
              <div>
                <el-link v-show="!row.state" @click="toupdate(row)"
                :style="{color:row.expireDay >0&&row.expireDay<=30?'#f2bd42':row.expireDay<=0?'red':''}" :underline="false">修改</el-link>
                <el-link v-show="!row.state" @click="delet(row)"
                :style="{color:row.expireDay >0&&row.expireDay<=30?'#f2bd42':row.expireDay<=0?'red':''}"  :underline="false">删除</el-link>
                <el-link v-show="!row.state" @click="tozhixing(row)"
                :style="{color:row.expireDay >0&&row.expireDay<=30?'#f2bd42':row.expireDay<=0?'red':''}" :underline="false">执行</el-link>
                <el-link  @click="toupdate(row,true)" :style="{color:row.expireDay >0&&row.expireDay<=30?'#f2bd42':row.expireDay<=0?'red':''}"
                 :underline="false">浏览</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="fenye">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="pageNo"
          :page-size="20"
          @current-change="gettablelist(formdata)"
          :total="+totalCount">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getDictionaryApi } from '@/api/customerFile'
import { getuserlistapi } from '@/api/analysis'
import {gettestcyclelistapi,deletetestcycleapi,postzhixingtestapi} from '@/api/system/TestCycle'
import Dialog from './Dialog'
import {exportexcel} from '@/utils/excel'
import TopTitle from '@/components/TopTitle/newtitle'
import SearchFor from './SearchFor'
export default {
  name: 'CallPoliceIndex',
  components: {
    Dialog,
    TopTitle,
    SearchFor
  },
  data() {
    return {
      pageNo:0,
      formdata:{},
      isshow:false,
      loading:false,
      totalCount:'',
      iissize: 'medium',
      tableData:[],
      tableConfig:[
        // { label: '序号', type:'index',width:'80' },
        { label: '用电企业', prop: 'orgName' },
        { label: '设备名称', prop: 'deviceName' },
        { label: '试验类型', prop: 'testTypeName' },
        { label: '上一次试验日期', prop: 'lastTestDate'},
        { label: '下一次试验日期', prop: 'nextTestDate' },
        { label: '到期天数', prop: 'expireDay' },
        // { label: '内容', prop: 'content' },
        { label: '状态', prop: 'stateName' ,center:'center'},
      ],
      qiyelist:[],
      shiyanlist:[],
    };
  },

  async mounted() {
    const { data: { list } } = await getuserlistapi()
    this.qiyelist=list
    const { data: { list:array } } = await getDictionaryApi('SYGL_SYLX','')
    this.shiyanlist=array
  },

  methods: {
    // 获取表格数据
    async gettablelist(val){
      this.loading=true
      this.formdata=val
      const {data:{list,totalCount}}=await gettestcyclelistapi({...val,pageNo:this.pageNo-1,pageSize:20})
      this.tableData=list
      this.totalCount=totalCount
      this.loading=false
    },
    // 修改
    toupdate(row,flag) {
      this.$refs.Dialogref.updateform(row,flag)
    },
    // 删除类型
    delet (row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
         await deletetestcycleapi(row.id).then(res=>{
            this.$message({
              type:res.code=='200'?'success':'warning',
              message: res.code == '200' ? '删除成功':res.message
            })
            if(res.code=='200')this.gettablelist(this.formdata)
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    tozhixing(row) {
      this.$confirm('是否执行此条试验周期信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
         await postzhixingtestapi(row.id).then(res=>{
            this.$message({
              type:res.code=='200'?'success':'warning',
              message: res.code == '200' ? '执行成功':res.message
            })
            if(res.code=='200')this.gettablelist(this.formdata)
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 表格密度调节
    command(val) {
      this.iissize = val
    },
    daochu() {
      exportexcel('/pio-microservice-biz/pio/experiment/cycle/exportExcel', {
        ...this.formdata,pageNo:this.pageNo-1,pageSize:20
      },'试验周期')
     },
    getRowStyle({ row }) {
      if (row.expireDay >0&&row.expireDay<=30) {
        return { color: '#f2bd42' }; // 状态为已执行时，整行文字变黄
      } else if (row.expireDay<=0) {
        return { color: 'red' }; // 状态为未执行时，整行文字变红
      }
      return {};
    }
  },
};
</script>
<style lang="scss" scoped>
.TestCycle{
  padding:10px;
  height:100%;
  .topbox{
    padding:20px;
    margin-bottom:10px;
    background-color:#fff;
  }
  .bodybox{
    background-color:#fff;
    padding:20px;
    .table{
      height:88%;
    }
    .fenye{
      text-align:right;
      margin-top:10px;
    }
  }
}
::v-deep .el-link--inner{
  margin:0 5px;
}
</style>